<template>
    <view class="tki-tree">
        <view class="tki-tree-view">
            <block ref="scrollView" v-for="(item, index) in treeList" :key="index">
                <view class="tki-tree-item"
                      :style="[{ paddingLeft: item.rank*15 + 'px', }]"
                      :class="{
						border: border === true,
						show: item.show,
						last: item.lastRank,
						showchild: item.showChild,
						open: item.open,
					}">
                    <view class="tki-tree-label" :class="'tki-tree-label' + index">
                        <u-icon :name="item.showChild ? currentIcon : defaultIcon"
                                style="margin-right:20rpx;" @click="_treeItemTap(item, index)"></u-icon>
                        <image v-if="index > 0" class="fileImage" src="../../static/images/fileManage/file_manage_list.svg"></image>
                        <view class="fileTitle">{{ item.chapterName }}</view>
                    </view>
                    <view v-if="item.showChild && item.show && item.open">
                        <view class="tki-tree-label tki-tree-label-file" v-for="(videoItem, videoIndex) in item.videoList" :key="'videoItem' + videoIndex">
                            <view class="fileTitle" @click="handlePlayer(videoItem)">{{ videoItem.fileName }}
                                <view class="round"  :class="item.status == 2 ? 'red' : item.status == 5 ? 'blue' : 'orange'"></view>
                            </view>
                            <view class="moreClass" v-if="isShow">
                                <!--                                <uni-icons type="more-filled" class="uni_icon" size="20" @click="openMore(videoIndex, index)"></uni-icons>-->
                                <view :tabindex="index"
                                       @click="handleFocus(index)" @focus="handleFocus(videoIndex, index)"
                                       @blur="handleBlur(videoIndex, index)" class="handleInput"
                                       :class="index === operationIndex?'active':''"></view>
                                <view class="videoOperation" ref="videoOperation"
                                      v-if="videoIndex === operationVideoIndex && operationParentIndex === index">
                                    <!-- <view class="videoOperation_btn" v-if="videoItem.permissionVo.update" @click="handleUpdate(item,videoItem)">更新</view> -->
                                    <!-- <view class="videoOperation_btn" v-if="videoItem.permissionVo.submit" @click="submitFn(item,videoItem)">提交</view> -->
                                    <!-- <view class="videoOperation_btn" v-if="videoItem.permissionVo.withdraw" @click="withdraw(item,videoItem)">撤回</view> -->
                                    <view class="videoOperation_btn" @click="handleFileInfo(item,videoItem)">文件信息</view>
                                    <!-- <viewn class="videoOperation_btn" v-if="methods === 'videoPlayer'" @click="handlePlayer(videoItem)">播放</viewn> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    name: 'tree',
    props: {
        range: {
            type: Array,
            default: function () {
                return []
            }
        },
        idKey: {
            type: String,
            default: 'id'
        },
        rangeKey: {
            type: String,
            default: 'label'
        },
        title: {
            type: String,
            default: ''
        },
        foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
            type: Boolean,
            default: false
        },
        confirmColor: { // 确定按钮颜色
            type: String,
            default: '' // #07bb07
        },
        cancelColor: { // 取消按钮颜色
            type: String,
            default: '' // #757575
        },
        titleColor: { // 标题颜色
            type: String,
            default: '' // #757575
        },
        currentIcon: {
            type: String,
            default: 'arrow-down'
        },
        defaultIcon: {
            type: String,
            default: 'arrow-right'
        },
        lastIcon: {
            type: String,
            default: ''
        },
        border: { //是否有分割线
            type: Boolean,
            default: false
        },
        methods: {
            type: String,
            default: ''
        },
        isShow: {
		    //是否显示
		    type: Boolean,
		    default: true
		}
    },
    data() {
        return {
            treeList: [],
            selectIndex: -1,
            operationIndex: -1,
            operationVideoIndex: -1,
            operationParentIndex: -1,
            show: false,
            formData: {
                folderName: '',
                author: '',
                synopsis: ''
            },
            titleIndex: 1,
            titleLabel: '章',
            parentId: null
        }
    },
    computed: {},
    methods: {
        //扁平化树结构
        _renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
            list.forEach(item => {
                this.treeList.push({
                    id: item[this.idKey],
                    chapter: item[this.idKey] || Date.now(),
                    chapterName: item[this.rangeKey],
                    source: item,
                    parentId, // 父级id数组
                    parents, // 父级id数组
                    rank, // 层级
                    showChild: true, //子级是否显示
                    open: true, //是否打开
                    show: true, // 自身是否显示
                    hideArr: [],
                    orChecked: item.checked || false,
                    checked: item.checked || false,
                    videoList: item.videoList
                })
                if (Array.isArray(item.children) && item.children.length > 0) {
                    let parentid = [...parentId],
                            parentArr = [...parents],
                            childrenid = [...childrenid]
                    delete parentArr.children
                    parentid.push(item[this.idKey])
                    parentArr.push({
                        [this.idKey]: item[this.idKey],
                        [this.rangeKey]: item[this.rangeKey]
                    })
                    this._renderTreeList(item.children, rank + 1, parentid, parentArr)
                } else {
                    this.treeList[this.treeList.length - 1].lastRank = true
                }
            })
        },
        openMore(videoIndex, index) {
            this.operationIndex = -1
            this.operationVideoIndex = videoIndex
            this.operationParentIndex = index
            setTimeout(() => {
                this.operationVideoIndex = -1
                this.operationParentIndex = -1
            }, 3000)
        },
    
        handleFocus(videoIndex, index) {
            setTimeout(() => {
                this.operationIndex = -1
                this.operationVideoIndex = videoIndex
                this.operationParentIndex = index
            }, 50)
        },
        handleBlur(videoIndex, index) {
            setTimeout(() => {
                this.operationVideoIndex = -1
                this.operationParentIndex = -1
            }, 50)
        },
        // 点击
        _treeItemTap(item, index) {
            /*if (item.lastRank === true) {
                //点击最后一级时触发事件
                this.treeList[index].checked = !this.treeList[index].checked
                return
            }*/
            let list = this.treeList
            let id = item.id
            item.showChild = !item.showChild
            item.open = item.showChild ? true : !item.open
            list.forEach((childItem, i) => {
                if (item.showChild === false) {
                    //隐藏所有子级
                    if (!childItem.parentId.includes(id)) {
                        return
                    }
                    if (!this.foldAll) {
                        if (childItem.lastRank !== true && !childItem.open) {
                            childItem.showChild = false
                        }
                        // 为隐藏的内容添加一个标记
                        if (childItem.show) {
                            childItem.hideArr[item.rank] = id
                        }
                    } else {
                        if (childItem.lastRank !== true) {
                            childItem.showChild = false
                        }
                    }
                    childItem.show = false
                } else {
                    // 打开子集
                    if (childItem.parentId[childItem.parentId.length - 1] === id) {
                        childItem.show = true
                    }
                    // 打开被隐藏的子集
                    if (childItem.parentId.includes(id) && !this.foldAll) {
                        if (childItem.hideArr[item.rank] === id) {
                            childItem.show = true
                            if (childItem.open && childItem.showChild) {
                                childItem.showChild = true
                            } else {
                                childItem.showChild = false
                            }
                            childItem.hideArr[item.rank] = null
                        }
                    }
                }
            })
        },
        _initTree(range = this.range) {
            this.treeList = []
            this._renderTreeList(range)
            /*this.$nextTick(() => {
                this._defaultSelect(range)
            })*/
        },
        handleUpdate(parentRow, row) {
            this.operationVideoIndex = -1
            this.$emit('handleUpdate', parentRow, row)
        },
        handleFileInfo(parentRow, row) {
            this.operationVideoIndex = -1
            this.$emit('handleFileInfo', parentRow, row)
        },
        handlePlayer(row) {
            this.operationVideoIndex = -1
            this.$emit('handlePlayer', row)
        },
        submitFn(parentRow, row){
            let that = this;
            uni.showModal({
						title: '提示',
						content: '确认提交该数据吗？',
						success: function(res) {
							if (res.confirm) {
								that.$request({
									url: "/knowledgeFile/file/submit",
									method: "post",
									data: {
										id: row.id
									},
								}).then(({
									data
								}) => {
                                    that.$toast("提交成功")
									that.$emit('getInfo')
                                    uni.navigateBack()
								})
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					});  
        },
        withdraw(parentRow, row){
            let that = this;
            uni.showModal({
						title: '提示',
						content: '确认撤回该数据吗？',
						success: function(res) {
							if (res.confirm) {
								that.$request({
									url: "/knowledgeFile/file/withdraw",
									method: "post",
									data: {
										id: row.id
									},
								}).then(({
									data
								}) => {
                                    that.$toast("撤回成功")
                                   
									that.$emit('getInfo')
                                    uni.navigateBack()
								})
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					});
        }
    },
    watch: {
        range(list) {
            this._initTree(list)
        }
    },
    mounted() {
        this._initTree()
    }
}
</script>

<style lang="scss" scoped>
.tki-tree-mask {
    position: fixed;
    top: 0rpx;
    right: 0rpx;
    bottom: 0rpx;
    left: 0rpx;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.6);
    //opacity: 0;
    display: none;
    transition: all 0.3s ease;
    visibility: hidden;
}

.tki-tree-mask.show {
    visibility: visible;
    //opacity: 1;
    display: block;
}

.tki-tree-cnt {
    position: fixed;
    right: 0rpx;
    bottom: 0rpx;
    left: 0rpx;
    z-index: 9999;
    top: 160rpx;
    transition: all 0.3s ease;
    transform: translateY(100%);
}

.tki-tree-cnt.show {
    transform: translateY(0);
}

.tki-tree-bar {
    background-color: #fff;
    height: 72rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom-width: 1rpx !important;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
    font-size: 32rpx;
    color: #757575;
    line-height: 1;
}

.tki-tree-bar-confirm {
    color: #07bb07;
}

.tki-tree-view {
    padding: 20rpx 0;
}


.tki-tree-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 26rpx;
    color: #757575;
    line-height: 1;
    width: 100%;
    //opacity: 0;
    display: none;
    transition: 0.2s;
    position: relative;
    // overflow: hidden;
    &.show {
        display: block;
    }
    &.showchild:before {
        transform: rotate(90deg);
    }
    &.last{
        &:before {
            //opacity: 0;
            display: none;
        }
    }
}
.tki-tree-icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
}

.tki-tree-label {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    padding: 0 30rpx 0 20rpx;
    &.tki-tree-label0{
        background: #F4F6F9;
    }
    .moreClass{
        margin: 0 0 0 auto;
        position: relative;
        .uni_icon{
            &:hover{
                color: #0084FF !important;
            }
        }
    }
    .u-icon__icon{
        color: #4C5A67 !important;
    }
    .fileImage{
        width: 24rpx;
        height: 24rpx;
        margin-right: 28rpx;
    }
    .fileTitle{
        width: calc(100% - 60rpx);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 72rpx;
        line-height: 72rpx;
        font-family: 思源黑体;
        font-size: 30rpx;
        color: #1C2126;
    }
    &.tki-tree-label-file{
        padding-left: 100rpx;
        box-sizing: border-box;
    }
}

.tki-tree-check {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tki-tree-check-yes,
.tki-tree-check-no {
    width: 20px;
    height: 20px;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    border-bottom-left-radius: 20%;
    border-top-width: 1rpx;
    border-left-width: 1rpx;
    border-bottom-width: 1rpx;
    border-right-width: 1rpx;
    border-style: solid;
    border-color: #07bb07;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.tki-tree-check-yes-b {
    width: 12px;
    height: 12px;
    border-top-left-radius: 20%;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    border-bottom-left-radius: 20%;
    background-color: #07bb07;
}

.tki-tree-check .radio {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.tki-tree-check .radio .tki-tree-check-yes-b {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.hover-c {
    opacity: 0.6;
}

.videoOperation {
    width: 172rpx !important;
    background: #FFFFFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(170, 190, 206, 0.4);
    position: absolute;
    right: 10rpx;
    margin-top: -10rpx;
    z-index: 99;
    .videoOperation_btn{
        width: 100%;
        text-align: center;
        height: 68rpx;
        line-height: 68rpx;
        font-family: 思源黑体;
        font-size: 30rpx;
        color: #1C2126;
        &:hover{
            background: #F4F6F9 !important;
        }
    }
    
}

.add_chapter_popup {
    padding: 40rpx;
    
    .upload_type {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100rpx;
        gap: 30rpx;
    }
    
    .uni-select {
        // width: 50%;
    }
    
    .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        // position: absolute;
        // bottom: 40rpx;
        // left: 0;
        
        .u-button {
            margin-top: 20rpx;
            width: 30%;
        }
    }
}

.round {
          width: 20rpx;
          height: 20rpx;
          display: inline-block;
          margin-left: 24rpx;
        }

        .orange {
          background: #f9d548;
          box-shadow: 0px 0px 4px 0px rgba(249, 213, 72, 0.4);
        }

        .red {
          background: #f53f3f;
          box-shadow: 0px 0px 4px 0px rgba(245, 63, 63, 0.4);
        }

        .blue {
          background: #0084ff;
          box-shadow: 0px 0px 4px 0px rgba(0, 132, 255, 0.4);
        }
</style>